<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>练习1</title>
    <style type="text/css">
      .btn-group button {
        float: left;
      }
      /*
       该段代码将.btn-group下的所有按钮元素向左浮动，这使得按钮元素在同一行内从左到右显示，直到空间不足以
       容纳下一个按钮，此时会换行显示
       */
      /* .btn-group button {
        display: inline;
      } */

      .btn-group button.active {
        background-color: blue;
        color: white;
      }
      .btn-group button:hover:not(.active){background-color: burlywood;}
      /* 

      */
    </style>
  </head>

  <body>
    <p>四个按钮组:</p>
    <div class="btn-group" style="width: 100%">
      <button style="width: 25%">Apple</button>
      <button style="width: 25%" class="active">Samsung</button>
      <button style="width: 25%">Sony</button>
      <button style="width: 25%">HTC</button>
    </div>
  </body>
</html>
